<template>
  <div class="joininbox flex-center">
    <div class="joinone">
      <div class="flex-center" style="margin-bottom: 40px;">
        <img src="../assets/liucheng.png" class="liuchengimg" alt="" />
        <p style="font-size: 30px;">入驻流程</p>
      </div>
      <div class="bevlogerbox flex-between">
        <div class="store_join_left">
          <p style="font-size: 20px;" >我们服务的商家业态</p>
          <div class="sixblock" >
            <div class="sixitem flex-center column" >
              <img src="../assets/food.jpg" alt="" />
              <p>美食板块</p>
            </div>
            <div class="sixitem flex-center column" >
              <img src="../assets/car.jpg" alt="" />
              <p>汽车板块</p>
            </div>
            <div class="sixitem flex-center column" >
              <img src="../assets/education.jpg" alt="" />
              <p>教育板块</p>
            </div>
            <div class="sixitem flex-center column" >
              <img src="../assets/house.png" alt="" />
              <p>地产板块</p>
            </div>
            <div class="sixitem flex-center column" >
              <img src="../assets/hospital.png" alt="" />
              <p>医疗板块</p>
            </div>
            <div class="sixitem flex-center column" >
              <img src="../assets/house.png" alt="" />
              <p>娱乐板块</p>
            </div>
          </div>
         </div>
        <el-steps direction="vertical" :active="1">
          <el-step title="注册心动点评账号" description="使用手机注册CouponCrush 账号"></el-step>
          <el-step title="申请为商家账号">
            <div slot='description'>
              通过商家端网站提交开店申请
              <div class="flex-a-c pointer">
                <p style="color: #1890FF;">https://store.cccouponcrush.com</p>
                <img src="../assets/copyg.png" style="width: 14px; height: 14px; margin-left: 10px;" alt="" />
              </div>
            </div>
          </el-step>
          <el-step title="平台审核" description="平台进行资质审核"></el-step>
          <el-step title="入驻成功" description="获得商户标识，开始营业"></el-step>
        </el-steps>
      </div>
    </div>

    <div class="advantage ">
      <p class="flex-center" style="font-size: 30px;">入驻优势</p>
      <p class="flex-center" style="color: rgba(0, 0, 0, .45); font-size: 20px;margin-top: 10px;">一切变得简单明了</p>
      <div style="margin-top: 40px;" class="rz_advantage" >
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >高效管理</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
            随时登录查看 订单与和销售额
          </p>
        </div>
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >精准营销</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
           通过后台数据了解消费者 喜好与习惯
          </p>
        </div>
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >数据洞察</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
          随时查看收入 成本与利润
          </p>
        </div>
      </div>
      <div style="margin-top: 40px;" class="rz_advantage" >
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >光速下单</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
            通过扫描用户二维码 轻松验证订单
          </p>
        </div>
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >多元支付选择</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
           支持：Visa/Master 支付宝/微信支付
          </p>
        </div>
        <div class="flex-center column" >
          <img src="../assets/ball.jpg" class="ballimg" alt="" />
          <p style="margin: 30px 0;" >高效引流</p>
          <p style="font-size: 16px; color: rgba(0, 0, 0, .45); width: 300px;" >
           红人营销（KOL、KOC）与优质内容种草模式以此来促成高效引流
          </p>
        </div>
      </div>
    </div>


  </div>
</template>

<script>
  export default {
    name: 'Nuxtstorejoinin',
    data() {
      return {

      }
    }
  }
</script>

<style>
  .joininbox {
    background-color: #FDF2F0;
    width: 100%;
    flex-direction: column;
  }
  .rz_advantage {
    display: grid;
    grid-template-columns: repeat(3, auto);
    text-align: center;
  }
  .joinone {
    margin: 40px 0;
    background-color: #fff;
    width: 1437px;
    padding: 60px 0px 80px 0px;
    box-sizing: border-box;
  }

  .liuchengimg {
    width: 24px;
    height: 24px;
  }

  .bevlogerbox {
    margin: 0 auto;
    width: 842px;
    height: 324px;
  }

  .store_join_left {
    .sixblock{
      width: 358px;
      height: 230px;
      background: url('/assets/map.jpg');
      background-size: cover;
      display: grid;
      grid-template-columns: repeat(3, auto);
      grid-gap: 10px;

      .sixitem{
        img{
          width: 56px;
          height: 56px;
        }
        >p{
          margin-top: 4px;
          font-size: 12px;
        }
      }
    }
  }

  .advantage {
    margin: 40px 0;
    background-color: #fff;
    width: 1440px;
    padding: 100px 0px;
    box-sizing: border-box;
  }
  .ballimg{
    width: 75px;
    height: 75px;
  }
</style>
